<template>
  <!--pages/post/post.wxml-->
  <view class="container" :class="isDopdown ? 'showDrodwon' : ''">
    <mineNavbar :styleData="styleData"></mineNavbar>
    <view class="catetory">
      <view v-for="item in workTypeArr" :key="item.value" @click="changeWorkType(item)">
        <view :class="positionType === item.value ? 'active' : 'common'">{{
          item.label
        }}</view>
        <image src="@/static/images/recruit/wan.png" mode="" v-if="positionType === item.value" />
      </view>
    </view>
    <view class="c_search">
      <picker :value="classifyIndex" mode="multiSelector" :range="classifyArr" range-key="label" @change="handleSelect"
        @columnchange="handleColumnChange" class="c_picker">
        <view class="left">
          <text>{{ cityName }}</text>
          <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/23/ba145cbf628342608d71e80919ebd06e.png"
            mode="" />
        </view>
      </picker>
      <view class="middle">
        <input type="text" v-model="fullPositionName" placeholder="搜索职位/公司名称" @click="handleFocus" />
      </view>
      <view class="right">
        <image src="@/static/images/recruit/search.png" mode="" />
      </view>
    </view>
    <view class="c_select">
      <view class="left">
        <view v-for="item in selectArr" :key="item" @click="changeSelectWork(item)">
          <text>{{ item }}</text>
          <image src="@/static/images/recruit/up1.png" mode="" v-if="isshowUp === item" />
          <image src="@/static/images/recruit/up.png" mode="" v-else />
        </view>
      </view>
      <view class="right" @click="changleWorkType">
        <image src="@/static/images/recruit/fenlei.png" mode="" v-if="isShowIcon" />
        <image src="@/static/images/recruit/fenlei1.png" mode="" v-else />
      </view>
      <dropDown class="dropDown" v-if="isDopdown" :isshowUp="isshowUp" @handleCancel="handleCancel"
        @handleConfirm="handleConfirm"></dropDown>
      <!-- 分类部分 -->
    </view>
    <scroll-view class="list" scroll-y @scrolltolower="scrollBottomFn" v-if="workTypeList.length">
      <view class="c_workList" v-if="isShowIcon">
        <workType :workTypeValue="workTypeList" @click="handleGoDetail" :positionType="positionType"></workType>
      </view>
      <view class="c_workList" v-else>
        <workTypeImg :workTypeValue="workTypeList" @click="handleGoDetail" :positionType="positionType"></workTypeImg>
      </view>
      <view class="downLoad">--加载完成，共{{ workTypeList.length }}条数据--</view>
    </scroll-view>
    <noneState v-else></noneState>
  </view>
</template>

<script>
import { regionTreeLevel } from "@/api/common.js";
import { getJobs } from "@/api/pages/home.js";
import noneState from "@/pages/recruit/components/noneState.vue";

import workType from "../home/workType/index.vue";
import workTypeImg from "../home/workTypeImg/index.vue";
import dropDown from "./dropDown/index.vue";

export default {
  components: {
    workType,
    dropDown,
    workTypeImg,
    noneState,
  },

  data() {
    return {
      styleData: {
        show: true,
      },
      workTypeArr: [
        { label: "全职岗位", value: 3 },
        { label: "小时工兼职", value: 2 },
        { label: "零工兼职", value: 1 }
      ],
      scrollTop: 0,
      pageSize: 10,
      pageNum: 1,
      pageTotal: 1,
      industryId: [],
      addressList: [],
      classifyArr: [[], []], // picker - 数据源
      classifyIndex: [18, 0], // picker - 索引
      childArr: [], // 二级分类数据源
      positionType: 3,
      workTypeList: [],
      fullPositionName: "", //输入框职位/公司名称
      cityName: "广州",
      cityId: "4401", // 城市id
      selectArr: ["分类", "排序", "筛选"],
      isshowUp: "分类", //选中的字段
      isShowIcon: true,
      isDopdown: false,
      longitude: "113.280637",
      latitude: "23.125178",
      sortType: null,
    };
  },
  computed: {},
  // watch: {
  //   "$store.state.pathData"(v) {
  //     console.log(v, "vvv");
  //   },
  //   deep: true,
  //   immediate: true,
  // },

  async onLoad(options) { },
  async onShow() { },
  onReady() { },

  mounted() {
    let that = this;
    this.handleRegion();
    // that.jobs();
    uni.getLocation({
      type: "wgs84",
      success: function (res) {
        const { errMsg, longitude, latitude } = res;
        if (errMsg == "getLocation:ok") {
          that.longitude = longitude;
          that.latitude = latitude;
          that.jobs();
        }
      },
    });


  },
  methods: {
    // 获取城市数据
    handleRegion() {
      regionTreeLevel({}).then((res) => {
        if (res.code == 200) {
          this.addressList = res.data;
          // 获取一级二级数据
          this.classifyArr[0] = this.addressList;
          this.classifyArr[1] = this.addressList[18].children;
        }
      });
    },
    // 获取焦点
    handleFocus() {
      uni.navigateTo({
        url: "/pages/recruit/home/search/index",
      });
    },
    changeWorkType(e) {
      this.positionType = e.value;
      this.pageNum = 1;
      this.pageSize = 10;
      this.jobs();
    },
    // 选择城市
    handleSelect(e) {
      let index = e.detail.value;
      this.classifyIndex = index;
      // 获取选中城市地址
      if (this.classifyArr[0].length != 0) {
        this.cityName = this.classifyArr[0][index[0]].children[index[1]].label;
        this.cityId = this.classifyArr[0][index[0]].children[index[1]].id;
      }
      this.pageNum = 1;
      this.pageSize = 10;
      this.jobs();
    },
    handleColumnChange(e) {
      let index = e.detail.value;
      // 当滚动切换一级分类时，为当前的一级分类添加它的子类
      if (e.detail.column == 0) {
        this.classifyArr[1] = this.classifyArr[0][index].children;
        this.$set(this.classifyArr, 1, this.classifyArr[0][index].children);
      }
    },
    // 筛选
    changeSelectWork(e) {
      console.log(e);
      if (this.isshowUp === e) {
        this.isDopdown = !this.isDopdown;
      } else {
        this.isDopdown = true;
        this.isshowUp = e;
      }
    },
    // 获取岗位列表（岗位模块通用）
    jobs() {
      this.industryId = uni.getStorageSync('activeList') || []
      getJobs({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        longitude: this.longitude,
        latitude: this.latitude,
        sortType: this.sortType,
        fullPositionName: this.fullPositionName,
        positionType: this.positionType,
        city: this.cityId,
        industryId: this.industryId,
        educationTypes: this.educationTypes,
        enterpriseScales: this.enterpriseScales,
        startSalary: this.startSalary,
        endSalary: this.endSalary,
      }).then((res) => {
        if (res.code == 200) {
          this.pageTotal = Math.ceil(res.total / this.pageSize);
          if (this.pageNum === 1) {
            this.workTypeList = res.rows;
          } else {
            res.rows.forEach((suc) => {
              this.workTypeList.push(suc);
            });
          }
        }
      });
    },
    // 切换岗位的显示方式
    changleWorkType() {
      this.isShowIcon = !this.isShowIcon;
    },
    // 去详情页
    handleGoDetail() {
      wx.navigateTo({
        url: "../../pages/detail/detail",
      });
    },
    // 取消
    handleCancel(e) {
      this.isDopdown = e;
    },
    // 确认
    handleConfirm(e) {
      this.educationTypes = e.educationTypes;
      this.enterpriseScales = e.enterpriseScales;
      this.industryId = e.industryId;
      this.sortType = e.sortType;
      this.startSalary = e.startSalary;
      this.endSalary = e.endSalary;
      this.isDopdown = false;
      this.pageNum = 1;
      this.pageSize = 10;
      this.jobs();
    },
    // 监听滑动到底部
    scrollBottomFn() {
      console.log(111);
      this.pageNum += 1;
      if (this.pageNum <= this.pageTotal) {
        this.jobs();
      } else {
        uni.showToast({
          title: "没有更多了",
        });
      }
    },
    //获取本地搜索缓存数据
    getStorageFun() {
      this.fullPositionName = uni.getStorageSync("inputValue") || "";
      this.fullPositionName = this.fullPositionName
        ? JSON.parse(this.fullPositionName)
        : "";
      console.log(this.fullPositionName);
    },
    // 清除本地搜索的缓存
    // removeStorageFun() {
    //   uni.removeStorageSync('inputValue', '')
    // }
  },
};
</script>
<style lang="scss" scoped>
/* pages/post/post.wxss */
.showDrodwon {
  height: 100vh;
  overflow: hidden;
}

.container {
  padding: 0;
  font-size: 28rpx;
  background: #fff;

  .catetory {
    width: 100%;
    height: 120rpx;
    display: flex;
    justify-content: space-around;

    >view {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .active {
        font-weight: 900;
        font-size: 32rpx;
        color: #000;
      }
    }

    image {
      width: 35rpx;
      height: 6px;
      margin-top: 5px;
    }
  }

  .c_search {
    width: 700rpx;
    height: 35px;
    background-color: #f8f8f8;
    border-radius: 75px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    margin: 0 32rpx;
    position: relative;

    .c_picker {
      width: 20%;
    }

    .left {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-left: 10px;

      >text {
        margin-right: 5px;
      }

      >image {
        width: 16rpx;
        height: 16rpx;
      }
    }

    .left::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0px;
      transform: translateY(-50%);
      width: 1px;
      background-color: #00000033;
      height: 10px;
    }

    .middle {
      width: 69%;
      margin-left: 20px;
    }

    .right {
      width: 10%;

      image {
        width: 14px;
        height: 14px;
      }
    }

    .iconfont {
      transform: rotate(-90deg);
      font-size: 10px;
      color: #ccc;
    }
  }

  .c_select {
    width: 100%;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: 20rpx solid #f9f9f9;

    .dropDown {
      position: absolute;
      top: 90rpx;
      left: 0;
      z-index: 99;
    }

    >view {
      display: flex;
      height: 100%;
      justify-content: space-between;
      align-items: center;
    }

    .left {
      width: 80%;

      >view {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        >text {
          margin-right: 5px;
        }

        image {
          width: 14rpx;
          height: 8px;
        }
      }
    }

    .right {
      width: 10%;
      justify-content: center;
    }

    image {
      width: 48rpx;
      height: 48rpx;
    }

    .classify {
      position: absolute;
      top: 88rpx;
      left: 0;
      width: 100%;
      background: #fff;

      >view {
        display: flex;
      }

      .left {
        width: 200rpx;
        background: #d8d8d85c;
        color: #00000073;

        >view {
          width: 100%;
          height: 120rpx;
        }

        >image {
          width: 20rpx;
          height: 20rpx;
        }

        .active {
          background-color: #fff;
          color: #000;
        }
      }

      .right {
        width: calc(100% - 200rpx);
        display: flex;
        flex-wrap: wrap;

        >view {
          width: 162rpx;
          height: 65rpx;
          border-radius: 32rpx;
          background-color: #ff9e24;
          color: #fff;
          text-align: center;
          line-height: 65rpx;
          margin-left: 14rpx;
        }
      }
    }
  }

  .list {
    height: calc(100vh - 430rpx);
    overflow: auto;

    // .c_workList {
    //   background: #f9f9f9;
    // }

    .downLoad {
      font-size: 24rpx;
      color: #00000033;
      width: 100%;
      height: 50rpx;
      line-height: 30rpx;
      text-align: center;
      margin-bottom: 20rpx;
      background: none;
    }
  }
}
</style>
